{% extends "wooey/base.html" %}
{% load i18n %}
{% load wooey_tags %}

{% block breadcrumbs %}
  <li><a href="#">{{ script.script_name }}</a></li>
{% endblock %}

{% block left_sidebar %}{% endblock left_sidebar %}
{% block center_content_class %}col-md-12 col-xs-12{% endblock center_content_class %}

{% block center_content %}

  <div class="page-header">
    <h3 id="wooey-script-title">
      {{ script.script_name }}
      <small id="wooey-script-info">(
        v{{ script_version }}.{{ script_iteration }},
        Last modified on {{ script_created_date }}
        {% if script_modified_by %}
          by {{ script_modified_by }}
        {% endif %}
        )</small>
    </h3>
    <p id="wooey-script-description">{{ script.script_description }}</p>
  </div>

  <div class="container-fluid">

    {% if script.documentation %}
      <div class="panel panel-default">
        <div class="panel-heading">{% trans "Documentation" %} <a class="icon icon-collapse" data-toggle="collapse" data-target="#collapse-metadata" href="#collapse-metadata"></a></div>
        <div id="collapse-metadata" class="panel-collapse collapse in">
          <div class="panel-body markdown">{{ script.documentation }}</div>
        </div>
      </div>
    {% endif %}


    <form id="wooey-job-form" method="POST" action="{{ form.action }}" enctype="multipart/form-data">
      {% csrf_token %}
      {{ form.wooey_form }}

      <div class="panel panel-default argument-group-panel {% if form.parsers|length != 1 %}subparsers{% endif %}">
        <div class="panel-heading">
          {% if form.parsers|length != 1 %}
            <div class="btn-group">
              <button id="selected-subparser" type="button" class="btn btn-default">
                {% with parser_name=form.parsers.0.1 %}
                  {% if not parser_name %}{% trans "Main Parser Parameters" %}{% else %}{{ parser_name|title }}{% endif %}
                {% endwith %}
              </button>
              <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="caret"></span>
              </button>
              <ul class="dropdown-menu">
                {% for parser_info, parser_groups in form.parsers.items %}
                  {% with parser_pk=parser_info.0 parser_name=parser_info.1 %}
                    <li class="{% if forloop.first %}active{% endif %}"><a data-toggle="tab" data-parser-pk="{{ parser_pk }}" data-parser-name="{{ parser_name }}" href="#parsergroup-{{ parser_pk }}">{% if not parser_name %}{% trans "Main Parser Parameters" %}{% else %}{{ parser_name|title }}{% endif %}</a></li>
                    {% if forloop.first %}
                      <li role="separator" class="divider"></li>
                    {% endif %}
                  {% endwith %}
                {% endfor %}
              </ul>
            </div>
          {% else %}
            <div class="info">
              {% trans "Settings" %}
            </div>
          {% endif %}


          <div class="tab-content">
            {% for parser_info, parser_groups in form.parsers.items %}
              {% with parser_pk=parser_info.0 parser_name=parser_info.1 %}
                <div id="parsergroup-{{ parser_pk }}" data-parser-pk="{{ parser_pk }}" class="tab-pane fade{% if forloop.first %} in active{% endif %}">
                  <div class="panel-nav-tabs">
                    <ul class="nav nav-tabs">
                      {% for group in parser_groups %}
                        {% with group.group_name|slugify as group_slug %}
                          <li class="{% if forloop.first %}active{% endif %}"><a data-toggle="tab" href="#optiongroup-{{ parser_pk }}-{{ group_slug }}">{{ group.group_name|title }}</a></li>
                        {% endwith %}
                      {% empty %}
                        <li class="no-parser-spacer"></li>
                      {% endfor %}
                    </ul>
                  </div>
                </div>
              {% endwith %}
            {% endfor %}
          </div>

          <a class="icon icon-collapse" data-toggle="collapse" data-target="#collapse-settings" href="#collapse-settings"></a>

        </div>

        <div id="collapse-settings" class="panel-collapse collapse in panel-body">
          <div class="tab-content">
            {% for parser_info, parser_groups in form.parsers.items %}
              {% with parser_pk=parser_info.0 parser_name=parser_info.1 first_parser=forloop.first %}
                {% for group in parser_groups %}
                  {% with group_slug=group.group_name|slugify first_group=forloop.first %}
                    <div id="optiongroup-{{ parser_pk }}-{{ group_slug }}" class="tab-pane fade{% if first_group and first_parser%} in active{% endif %}">
                      {% for field in group.form %}
                        <div class="form-group row">
                          {{ field.errors }}
                          {% if not field.is_hidden %}
                            <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                          {% endif %}
                          {{ field }}
                          {% if not field.is_hidden %}
                            <p class="help-block">{{ field.help_text }}</p>
                          {% endif %}
                        </div>
                      {% endfor %}
                    </div>
                  {% endwith %}
                {% endfor %}
              {% endwith %}
            {% endfor %}
          </div>
        </div>
      </div>

      <div class="panel panel-default">
        <div class="panel-heading">{% trans "Metadata" %}
          <a class="icon icon-collapse" data-toggle="collapse" data-target="#collapse-metadata" href="#collapse-metadata"></a>
        </div>
        <div id="collapse-metadata" class="panel-collapse collapse in">
          <div class="panel-body">

            <div class="form-group row">
              <label for="job-name">{% trans "Job Name" %}</label>
              <input class="form-control" id="wooey_job_name" type="text" id="job-name" name="job_name" placeholder="{% trans "Job Name" %}" value="{{ script.script_name }} {% now "Ymd-G:i" %}"/>
            </div>
            <div class="form-group row">
              <label for="job-description">{% trans "Job Description" %}</label>
              <textarea class="form-control" id="wooey_job_description" cols="30" rows="5" id="job-description" name="job_description" placeholder="{% trans "Enter job description here..." %}"></textarea>
            </div>
          </div>
        </div>
      </div>

      <input name="wooey_clone_task_id" id="wooey_clone_task_id" type="hidden">
      <div class="pull-right">
        <button id="wooey-form-submit" type="submit" class="btn btn-primary">{% trans "Submit" %}</button>
      </div>
    </form>
  </div>

{% endblock center_content %}

{% block inline_js %}
  {{ block.super }}
  <script  type="text/javascript">


    $(document).ready(function(){
      var filesUploaded = {};

      var multi_selector = 'a[href=#wooey-multi-input]';
      var wooey_remove_selector = 'a[href=#wooey-multi-input-remove]';
      var all_multi_selectors = 'a[href=#wooey-multi-input], a[href=#wooey-multi-input-remove]';
      var wooey_multiple_selector = '[data-wooey-multiple]';
      var wooey_choice_limit = 'wooey-choice-limit';

      var $wooey_parser_selector = $('a[href^=#parsergroup]');
      var $wooey_parser = $('#id_wooey_parser');
      var selected_subparser = 'selected-subparser';

      $('[href^=#parsergroup-]').click(function(evt){
        var $this = $(evt.target);
        var $parser_group = $($this.attr('href'));
              // Set the selected subparser text
        $('#' + selected_subparser).text($this.text());

              // We need to manually remove the 'active' class from the subparser dropdown menu on selection.
              // Not entirely sure why bootstrap isn't doing this for us.
        $this.parent('li').siblings('li').removeClass('active');

              // We need to re-trigger whatever tab is currently selected for the given subparser so its
              // content populates the parameter selection div
        var $previously_active_tab = $parser_group.find('li.active > a');
              // We remove the active class so bootstrap will re-trigger the tab show event
        $previously_active_tab.parent('li').removeClass('active');
        $previously_active_tab.trigger('click');

      });

      var maxChoices = function($element){
        $element.popover({
          content: "{% trans "No more choices may be added for this selection" %}",
          trigger: 'manual'
        }).popover('show');
        setTimeout(function(){$element.popover('destroy')}, 1000);
      };

      var initializeWooeyScript = function(){
                // Add the - button so users can remove elements from cloned jobs
        $(wooey_multiple_selector).parent().each(
          function(element, value){
            var $wooey_multiples = $(value).find(wooey_multiple_selector);
            if($wooey_multiples.length !== 1) {
              for (var i = 0; i < $wooey_multiples.length; i++) {
                var $remove_button = removeMultiInput();
                $remove_button.appendTo($wooey_multiples[i]);
              }
            }
          }
        );

        var $multi_selector = $(multi_selector);
        $multi_selector.click(function(event){
          event.preventDefault();
          var $this = $(this);

          var $containers = $this.siblings(wooey_multiple_selector);
                    // check the choice limit, are we at it?
          var choice_limit = $this.data(wooey_choice_limit);
          if(choice_limit && ($containers.length === choice_limit)){
                        // give a notice
            maxChoices($this);
            return;
          }

          var $container = $containers.first();
                    // if the container doesn't have a remove button since it's the first one, add one
          if($container.find(wooey_remove_selector).length === 0){
            removeMultiInput().appendTo($container);
          }
          var $new_target = $container.clone();
          $new_target.insertAfter($container);
                    // remove any existing removal buttons from the container
          $new_target.find(all_multi_selectors).remove();
                    // add a way to remove the new container
          var $remove_button = removeMultiInput();
          $remove_button.appendTo($new_target);
        });

                // setup the choice limits for select fields
        $('select[data-wooey-choice-limit] option').click(function(event){
          var $this = $(this);
          var $select = $this.parent();
          var choice_limit = $select.data(wooey_choice_limit);
          var selected = $select.find(':selected').length;
          if(choice_limit && (selected > choice_limit)){
            $this.prop("selected", false);
            maxChoices($select);
            return;
          }
        });

        var selectWooeyParser = function ($el) {
          $wooey_parser.val($el.data('parser-pk'));
        };

        if ($wooey_parser_selector.length) {
          $wooey_parser_selector.click(function (evt) {
            selectWooeyParser($(this))
          });
        } else {
          selectWooeyParser($('div[id^=parsergroup-]'))
        }

        // Set initial subparser if present in url params.
        const urlParams = new URLSearchParams(window.location.search);
        const subparser = urlParams.get('__subparser');
        var $initial_parser = $("a[data-parser-name=" + subparser + "]");
        if ($initial_parser.length) {
          $initial_parser.click();
        }
      };


      var removeMultiInput = function(){
        var $remove_input = $('<a href="#wooey-multi-input-remove"><span class="glyphicon glyphicon-minus"></span></a>');
        $remove_input.click(function(event){
          event.preventDefault();
          var $multi_input = $(this).parent(wooey_multiple_selector);

                    // all other containers with multi-selections for this parameter
          var $others = $multi_input.siblings(wooey_multiple_selector);
                    // remove us
          $multi_input.remove();
                    // if there is only 1 container left, remove the button to remove it
          if($others.length == 1){
            $others.find(wooey_remove_selector).remove();
          }
        });
        return $remove_input;
      };

      {% if job_info %}
                // Track file changes
        $("input:file").change(function (){
          var fileName = $(this).val();
          filesUploaded[$(this).attr('name')] = fileName;
        });
      {% endif %}
      initializeWooeyScript();

      $('#wooey-form-submit').click(function(event){
        event.preventDefault();
        var $form = $(this).closest('form');
                // if we are cloning a job, we need to specify the fields as the files because the file type input
                // will be blank
        var formData = new FormData($form[0]);
        $('input[type="file"]').each(function(index, value){
          if(filesUploaded[$(this).attr('name')] === undefined){
                        // the user has not selected a file to replace this one
            formData.append($(this).attr('name'), $(this).siblings('a').text());
          }
        });
        $.ajax({
          url: $form.attr('action'),
          type: 'POST',
          data: formData,
          dataType: 'json',
          async: false,
          cache: false,
          contentType: false,
          processData: false,
          success: function(data){
            clearErrors($form);
            if(data.valid){
                            // clear form and indicate they can proceed
              $form[0].reset();
              location.href = data.redirect;
            }
            else{
              processErrors($form, data.errors)
            }
          }
        });
      });
    });
  </script>
{% endblock inline_js %}
